Implementasi Tooltip: Informasi Aksesibel dengan Hover dan Fokus

Tooltip adalah pesan bantuan kontekstual kecil yang muncul saat pengguna mengarahkan pointer mouse atau fokus pada suatu elemen. Pesan ini dapat memberikan informasi tambahan, memperjelas tujuan elemen, atau menawarkan petunjuk tentang cara menggunakan suatu fitur. Namun, tooltip dapat dengan mudah menjadi mimpi buruk aksesibilitas jika tidak diimplementasikan dengan benar. Panduan ini menguraikan praktik terbaik untuk membuat tooltip yang dapat digunakan oleh semua orang, termasuk pengguna dengan disabilitas.

Mengapa Aksesibilitas Penting untuk Tooltip

Aksesibilitas bukan hanya tentang kepatuhan; ini tentang menciptakan pengalaman pengguna yang lebih baik untuk semua orang. Ketika tooltip tidak aksesibel, hal ini dapat mengecualikan pengguna yang mengandalkan teknologi bantu seperti pembaca layar, navigasi keyboard, atau input suara. Pertimbangkan skenario berikut:

• Pengguna pembaca layar: Jika tooltip tidak ditandai dengan benar, pembaca layar mungkin tidak akan mengumumkan keberadaan atau kontennya.
• Pengguna keyboard: Jika tooltip hanya muncul saat di-hover, pengguna keyboard tidak akan dapat mengaksesnya.
• Pengguna dengan gangguan motorik: Gerakan mouse yang presisi yang diperlukan untuk interaksi hover bisa jadi menantang atau tidak mungkin dilakukan.
• Pengguna dengan disabilitas kognitif: Tooltip yang waktunya tidak tepat atau membingungkan dapat menciptakan frustrasi dan menghambat pemahaman.

Dengan mengikuti praktik terbaik aksesibilitas, kita dapat memastikan bahwa tooltip meningkatkan, bukan menghambat, pengalaman pengguna untuk semua.

Prinsip Utama untuk Tooltip yang Aksesibel

Prinsip-prinsip berikut sangat penting untuk menciptakan tooltip yang aksesibel:

1. Sediakan akses alternatif: Pastikan tooltip dapat diakses melalui hover dan fokus keyboard.
2. Gunakan atribut ARIA: Gunakan atribut ARIA (Accessible Rich Internet Applications) untuk mengidentifikasi dan mendeskripsikan tooltip dengan benar kepada teknologi bantu.
3. Kelola fokus: Kontrol ke mana fokus diarahkan saat tooltip ditampilkan dan disembunyikan.
4. Pastikan kontras yang cukup: Sediakan kontras warna yang cukup antara teks dan latar belakang tooltip.
5. Berikan waktu yang cukup: Beri pengguna cukup waktu untuk membaca konten tooltip.
6. Buat agar dapat ditutup: Sediakan cara yang jelas untuk menutup tooltip.
7. Hindari penggunaan berlebihan: Gunakan tooltip secukupnya dan hanya jika diperlukan.

Teknik Implementasi

1. Menggunakan Hover dan Fokus

Aspek paling penting dari tooltip yang aksesibel adalah memastikan tooltip tersebut dapat diakses oleh pengguna mouse dan keyboard. Ini berarti tooltip harus muncul baik saat di-hover maupun saat elemen menerima fokus.

HTML:

            <a href="#" aria-describedby="tooltip-example">Contoh Tautan</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Ini adalah contoh tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Pastikan tooltip berada di paling atas */
}

            

              
                Copy
              
            
          

Penjelasan:

• aria-describedby: Atribut ini menghubungkan tautan ke elemen tooltip menggunakan ID-nya. Ini memberitahu teknologi bantu bahwa tooltip memberikan informasi tambahan tentang tautan tersebut.
• role="tooltip": Peran ARIA ini mengidentifikasi elemen sebagai tooltip.
• CSS menggunakan selektor saudara yang berdekatan (+) untuk menampilkan tooltip saat tautan di-hover atau difokuskan.

JavaScript (Kontrol Lanjutan - Opsional):

Meskipun CSS dapat menangani tampil/sembunyi sederhana, JavaScript memungkinkan kontrol yang lebih kuat, terutama ketika tooltip dibuat secara dinamis atau memerlukan perilaku yang lebih kompleks.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Menggunakan Atribut ARIA

Atribut ARIA sangat penting untuk memberikan informasi semantik kepada teknologi bantu. Berikut adalah rincian atribut-atribut utama:

• aria-describedby: Seperti yang disebutkan sebelumnya, atribut ini membangun hubungan antara elemen pemicu dan elemen tooltip.
• role="tooltip": Atribut ini secara eksplisit mendefinisikan elemen sebagai tooltip.
• aria-hidden="true"/aria-hidden="false": Gunakan ini untuk menunjukkan apakah tooltip saat ini terlihat oleh teknologi bantu. Saat tooltip disembunyikan, atur aria-hidden="true". Saat terlihat, atur aria-hidden="false". Ini sangat penting saat menggunakan JavaScript untuk mengontrol visibilitas tooltip.

Contoh:

            <button aria-describedby="help-tooltip">Kirim</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klik di sini untuk mengirimkan formulir.</div>
            

              
                Copy
              
            
          

JavaScript (untuk aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Mengelola Fokus

Saat tooltip muncul, umumnya tooltip *tidak boleh* merebut fokus dari elemen pemicunya. Fokus harus tetap pada elemen yang memicu tooltip. Ini memastikan bahwa pengguna keyboard dapat terus menavigasi halaman tanpa gangguan yang tidak terduga.

Namun, mungkin ada situasi di mana Anda *ingin* memindahkan fokus ke tooltip, terutama jika tooltip berisi elemen interaktif (misalnya, tautan, tombol). Dalam hal ini, pastikan bahwa:

• Tooltip secara visual berbeda untuk menunjukkan bahwa ia memiliki fokus.
• Ada cara yang jelas untuk mengembalikan fokus ke elemen pemicu asli (misalnya, tombol tutup di dalam tooltip).

Dalam kebanyakan kasus, menghindari manajemen fokus di dalam tooltip itu sendiri lebih disukai untuk kesederhanaan dan kegunaan.

4. Memastikan Kontras yang Cukup

Kontras warna sangat penting untuk keterbacaan. Pastikan bahwa warna teks di tooltip Anda memiliki kontras yang cukup terhadap warna latar belakang. Web Content Accessibility Guidelines (WCAG) merekomendasikan rasio kontras setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar (18pt atau 14pt tebal).

Gunakan pemeriksa kontras online untuk memverifikasi bahwa pilihan warna Anda memenuhi standar aksesibilitas. Contoh pemeriksa kontras meliputi:

• Pemeriksa Kontras WebAIM: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Contoh (Kontras Baik):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Contoh (Kontras Buruk):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Memberikan Waktu yang Cukup

Pengguna membutuhkan waktu yang cukup untuk membaca konten tooltip. Hindari tooltip yang menghilang terlalu cepat. Meskipun tidak ada angka ajaib, usahakan waktu tampilan minimal beberapa detik. Selain itu, tooltip harus tetap terlihat selama pengguna mengarahkan kursor atau fokus pada elemen pemicu. Jika Anda perlu menutup tooltip karena peristiwa lain, berikan indikator bahwa tooltip akan ditutup.

Jika konten tooltip panjang, pertimbangkan untuk menyediakan cara bagi pengguna untuk menutup tooltip secara manual (misalnya, tombol tutup atau menekan tombol Escape).

6. Membuatnya Dapat Ditutup

Meskipun tooltip seringkali hilang secara otomatis saat pengguna menjauhkan mouse atau menghilangkan fokus, adalah praktik yang baik untuk menyediakan cara yang jelas untuk menutupnya secara manual, terutama untuk tooltip yang panjang atau tooltip yang berisi elemen interaktif.

Metode untuk Menutup Tooltips:

• Tombol tutup: Sertakan tombol tutup yang menonjol secara visual di dalam tooltip.
• Tombol Escape: Izinkan pengguna untuk menutup tooltip dengan menekan tombol Escape.
• Klik di luar: Tutup tooltip saat pengguna mengklik di mana saja di luar tooltip dan elemen pemicu. (Gunakan dengan hati-hati karena dapat mengganggu).

Contoh (Tombol Tutup):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Ini adalah konten tooltip saya.
  <button onclick="hideTooltip()">Tutup</button>
</div>
            

              
                Copy
              
            
          

Contoh (Tombol Escape):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Ganti dengan fungsi sembunyikan tooltip Anda yang sebenarnya
  }
});

            

              
                Copy
              
            
          

7. Menghindari Penggunaan Berlebihan

Tooltip harus digunakan secukupnya dan hanya jika memberikan informasi yang benar-benar membantu. Penggunaan tooltip yang berlebihan dapat mengacaukan antarmuka, mengalihkan perhatian pengguna, dan menciptakan pengalaman yang membuat frustrasi.

Alternatif untuk Tooltip:

• Label yang jelas: Gunakan label yang jelas dan deskriptif untuk bidang formulir, tombol, dan tautan.
• Bantuan kontekstual: Sediakan teks bantuan langsung di dalam antarmuka, di dekat elemen yang relevan.
• Dokumentasi bantuan: Tautkan ke dokumentasi bantuan yang komprehensif untuk fitur yang lebih kompleks.

Pertimbangan Lanjutan

Konten Dinamis

Jika konten tooltip Anda dibuat secara dinamis (misalnya, dimuat dari API atau diperbarui berdasarkan input pengguna), pastikan bahwa atribut aria-describedby dan visibilitas tooltip diperbarui sesuai. Gunakan JavaScript untuk mengelola pembaruan ini.

Penentuan Posisi

Pertimbangkan dengan cermat penentuan posisi tooltip Anda. Hindari menempatkannya dengan cara yang menutupi konten penting atau menyebabkan pergeseran tata letak. Perhatikan ukuran dan resolusi layar yang berbeda, dan gunakan CSS untuk memastikan bahwa tooltip selalu terlihat di dalam viewport.

Perangkat Seluler

Tooltip secara tradisional mengandalkan interaksi hover, yang tidak tersedia pada perangkat berbasis sentuhan. Untuk perangkat seluler, pertimbangkan untuk menggunakan metode interaksi alternatif, seperti:

• Ketuk: Tampilkan tooltip saat pengguna mengetuk elemen.
• Tekan lama: Tampilkan tooltip saat pengguna menekan lama elemen tersebut.
• Tampilkan saat fokus: Tampilkan saat elemen menerima fokus. Ini dapat dicapai dengan JavaScript, memeriksa dukungan sentuhan (misalnya, ('ontouchstart' in window)) dan mengubah perilaku tampilan yang sesuai.

Menguji Tooltip Anda

Uji tooltip Anda secara menyeluruh untuk memastikan tooltip tersebut dapat diakses oleh semua pengguna. Gunakan kombinasi pengujian manual dan alat pengujian aksesibilitas otomatis.

Metode Pengujian:

• Navigasi keyboard: Verifikasi bahwa tooltip dapat diakses menggunakan keyboard.
• Pengujian pembaca layar: Gunakan pembaca layar untuk memastikan bahwa tooltip diumumkan dengan benar.
• Analisis kontras warna: Gunakan pemeriksa kontras warna untuk memverifikasi kontras yang cukup.
• Pengujian seluler: Uji tooltip di berbagai perangkat seluler dan ukuran layar.
• Pengujian aksesibilitas otomatis: Gunakan alat seperti axe DevTools, WAVE, atau Lighthouse untuk mengidentifikasi potensi masalah aksesibilitas.

Internasionalisasi (i18n) dan Lokalisasi (l10n)

Saat mengembangkan tooltip untuk audiens global, pertimbangkan internasionalisasi dan lokalisasi:

• Arah teks: Dukung arah teks dari kiri ke kanan (LTR) dan kanan ke kiri (RTL). Gunakan properti logis CSS (misalnya, margin-inline-start, margin-inline-end) alih-alih properti fisik (misalnya, margin-left, margin-right) untuk tata letak.
• Terjemahan spesifik bahasa: Sediakan terjemahan konten tooltip untuk berbagai bahasa.
• Format tanggal dan waktu: Sesuaikan format tanggal dan waktu dengan lokal pengguna.
• Format angka: Gunakan format angka yang sesuai untuk berbagai wilayah (misalnya, pemisah desimal, pemisah ribuan).

Kesimpulan

Menerapkan tooltip yang aksesibel memerlukan perencanaan yang cermat dan perhatian terhadap detail. Dengan mengikuti prinsip dan teknik yang diuraikan dalam panduan ini, Anda dapat membuat tooltip yang dapat digunakan oleh semua orang, terlepas dari kemampuan mereka. Ingatlah bahwa aksesibilitas adalah proses yang berkelanjutan, jadi teruslah menguji dan menyempurnakan tooltip Anda untuk memastikan tooltip tersebut memenuhi kebutuhan semua pengguna Anda.

Sumber Daya

• Panduan Praktik Penulisan ARIA (APG) - Tooltip
• Pedoman Aksesibilitas Konten Web (WCAG) 2.1
• MDN Web Docs - ARIA